<template>
  <div v-on:scroll.passive="onscroll">
    <h1>事件修饰符</h1>
    <a
      href="https://gitee.com/chl6666/accrual-vue-code/tree/master/src/components"
      v-on:click.prevent
      >阻止默认行为</a
    >
    <a
      href="https://gitee.com/chl6666/accrual-vue-code/tree/master/src/components"
      >不阻止默认行为</a
    >
    <h1>111</h1>
    <div v-on:click="show('shijian111')">
      <button v-on:click="show('事件222')">点击事件冒泡</button>
      <h1>111</h1>
    </div>
    <button v-on:click.stop="show('事件333')">阻止点击事件冒泡</button>
    <h1>事件捕获</h1>
    <div>
      <button v-on:click.capture="show('事件444')">点击事件捕获</button>
      <h1>111</h1>
    </div>
    <div>
      <button v-on:click.once="show('事件555')">点击事件只执行一次</button>
      <h1>111</h1>
    </div>
    <div class="scrollable" v-on:scroll.passive="onscroll">????777</div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const onscroll = (e) => {
  console.log("Scroll event triggered:", e.target.scrollTop);
};

const show = (message) => {
  console.log(message);
};
</script>
<style scoped>
.scrollable {
  height: 7rem;
  overflow-y: auto;
}
</style>
